<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>支出明细</title>
    <style>
        input {
            height: 30px;
            text-align: right;
            width: 250px;
            margin: 20px;
        }

        a {
            height: 30px;

        }

        ul {
            width: 100%;
            height: 100%;
        }

        ul li {
            width: 100%;

            margin: 10px 20px;
        }

        ul li span {
            color: red;
            font-size: 15px;
        }

    </style>
    <%@include file="/WEB-INF/views/commons/commons.jsp" %>
</head>
<body>


<div style="margin: 20px 0  0 100px;border: 1px solid #ccc;height: 100px;width:400px;">
    <ul>
        <li>本日支出: &nbsp;&nbsp;<span>￥</span>&nbsp;<span id="date_money">1200</span>&nbsp;<span>元</span></li>
        <li>本月支出: &nbsp;&nbsp;<span>￥</span>&nbsp;<span id="mouth_money">1200</span>&nbsp;<span>元</span></li>
        <li>本年支出: &nbsp;&nbsp;<span>￥</span>&nbsp;<span id="year_money">1200</span>&nbsp;<span>元</span></li>

    </ul>

</div>

<div id="main" style="height: 400px;width:800px;margin-left: 100px"></div>


<form method="post" id="line_form">

    <input class="easyui-datetimebox" id="beginDate" name="beginDate" data-options="showSeconds:true" prompt="开始时间">
    ~<input class="easyui-datetimebox" id="endDate" name="endDate" data-options="showSeconds:true" prompt="结束时间">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true"
       data-cmd="query">查询</a>

</form>

<script type="text/javascript">


</script>
<script src="/static/js/plugins/echarts/echarts-all.js"></script>
<script type="text/javascript">
    $(function () {
        $.get("/kinditem/list", function (data) {
      /*      data =JSON.parse(data);*/
            viewLine(data);
        });
        var url = "/kinditem/listView";
        $("a[data-cmd]").click(function(){

        $("#line_form").form('submit', {
            url: url,
            success: function (data) {
                data =JSON.parse(data);
                viewLine(data);
            }
        })
        })

        function viewLine(data) {


            var dateMoney = 0;
            var mouthMoney = 0;
            var yearMoney = 0;
            var arrMoney = new Array(12);
            for (var i = 0; i < arrMoney.length; i++) {
                var mouthM = 0;
                for (var j = 0; j < data.length; j++) {
                    var strTime = data[j].kdate;
                    var dateM = new Date(strTime);
                    if (dateM.getMonth() == i) {
                        mouthM = mouthM + data[j].price;
                    }

                }
                arrMoney[i] = mouthM;
            }


            for (var i = 0; i < data.length; i++) {
                var strtime = data[i].kdate;
                var date = new Date(strtime);
                var currentTime = new Date();
                if (date.getDate() == currentTime.getDate()) {
                    dateMoney = dateMoney + data[i].price
                }
                if (date.getMonth() == currentTime.getMonth()) {
                    mouthMoney = mouthMoney + data[i].price
                }
                if (date.getYear() == currentTime.getYear()) {
                    yearMoney = yearMoney + data[i].price
                }


            }
            $("#date_money").text(dateMoney);
            $("#mouth_money").text(mouthMoney);
            $("#year_money").text(yearMoney);


            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            option = {

                title: {
                    text: '本年度支出统计',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },

                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月',
                            '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '每月支出',
                        type: 'line',

                        data: arrMoney,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }



    })
</script>


</body>
</html>
